<template>
  <div class="index_box">
    <div class="login_box">
      <el-button v-if="!mode" type="primary" link class="btn_register" @click="changeMode">立即注册</el-button>
      <login-component v-if="!mode" @dialog="changeDialog"></login-component>
      <el-button v-if="mode" type="primary" link class="btn_register" @click="changeMode">返回登录</el-button>
      <register-component v-if="mode" @changeLoginType="changeLoginType" @dialog="changeDialog"></register-component>
    </div>
    <el-dialog v-model="dialogShow" title="提示" width="15%" align-center :show-close="false" center @close="dialogClose">
      <p>{{ dialogMsg }}</p>
      <template #footer>
        <el-button type="success" @click="dialogShow=false">确定</el-button>
      </template>
    </el-dialog>
  </div>
  
</template>

<script lang="ts" setup>
import LoginComponent from "../components/Login/LoginComponent.vue";
import RegisterComponent from "../components/Login/RegisterComponent.vue";
import {ref} from "vue";

let mode = ref(false)
let dialogShow = ref(false)
let dialogMsg = ref("")
let dialogClose =ref( ()=>{})
const  changeMode = ()=>{
  mode.value = !mode.value;
}
const changeLoginType = (value: boolean)=>{
  mode.value = value;
}
const changeDialog=(value: any)=>{
  dialogClose.value = value.func;
  dialogMsg.value = value.msg;
  dialogShow.value = value.show;
}
</script>

<style lang="scss" scoped>
.index_box {
  height: 100%;
  width: 100%;
  background-image: url("../assets/login-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  position: relative;

  .login_box {
    //margin-right: 15vw;
    max-width: 30vw;
    width: 25vw;
    height: auto;
    padding: 4vh 0 7vh 0;
    background-color: rgba($color: #ffffff, $alpha: 0.9);
    backdrop-filter: blur(15px) saturate(150%);
    box-shadow: 0 0 15px rgba($color: #000, $alpha: 0.39);
    position: relative;
    //border-radius: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .btn_register {
      position: absolute;
      right: 1em;
      top: 1em;
    }
  }
}
</style>
